<script setup>
// 1、下载 vant npm i vant
// 2、注册组件 main.js
// 3、引入组件样式 main.js import 'vant/lib/index.css';
// 4、van 组件使用
import { ref } from "vue";
import logo from "../assets/logo.png";
import { showToast } from "vant";
import axios from "axios";
import request from "../utils/request";
import { registerApi } from "../api/user";

// 表单数据
const form = ref({
  username: "",
  password: "",
  confirmPassword: "",
  email: ""
});

// 表单验证规则
const validateForm = () => {
  if (form.value.password !== form.value.confirmPassword) {
    showToast("密码不一致");
    return false;
  }
  return true;
};

// 注册提交
const onSubmit = e => {
  if (validateForm()) {
    // 这里可以添加注册逻辑
    registerApi({
      "username": e.username,
      "password": e.password,
      "email": e.email
    }).then(res => {
      console.log(JSON.stringify(res));
      // 数据
      console.log(res.data);
      showToast("注册成功");
      console.log("注册信息:", form.value);
    });
  }
};
</script>

<template>
  <div>
    <!-- 添加图片 -->
    <div class="logo-container">
      <van-image :src="logo" class="logo"></van-image>
    </div>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="form.username"
          name="username"
          placeholder="请输入用户名"
          :rules="[
          { required: true, message: '请输入用户名' }, // 必填项
        ]"
        />
        <van-field
          v-model="form.password"
          type="password"
          name="password"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' },
        {
          pattern: /^[a-zA-Z0-9]{6,12}$/,
          message: '密码格式不正确'
        }
        ]"
        />
        <van-field
          v-model="form.confirmPassword"
          type="password"
          name="confirmPassword"
          placeholder="请再次输入密码"
          :rules="[{ required: true, message: '请再次输入密码' },
        {
          pattern: /^[a-zA-Z0-9]{6,12}$/,
          message: '密码格式不正确'
        }
        ]"
        />
        <van-field
          v-model="form.email"
          type="email"
          name="email"
          placeholder="请输入邮箱"
          :rules="[{ required: true, message: '请输入邮箱' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <div class="register-link">
      <router-link to="/login">还没有账号？立即注册</router-link>
    </div>
  </div>
</template>

<style scoped>
#app {
  padding: 20px 0;
}

.logo-container {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 30px;
}

.logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.register-link {
  text-align: center;
  margin-top: 20px;
}

.register-link a {
  color: #1989fa;
  text-decoration: none;
}
</style>